<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地铁掌上通</title>
		<style type="text/css">
			*{margin:0;border:0;padding:0;}
			body{width:100%;max-width:720px;margin:auto;overflow-x: hidden;}
			img{max-width: 100%;display:block;}
			.bg{display:block;}
			.abs{position:absolute;}
			.abs[class*="clik"]{animation:clik 1s infinite;-webkit-animation:clik 1s infinite;}
			.sun{animation: sun 2s infinite linear;-webkit-animation: sun 2s infinite linear;}
			.train{animation: train 3s;-webkit-animation: train 3s;}
			.flag{-webkit-animation: flag 2s infinite;-webkit-transform-origin-x: 10%;animation: flag 2s infinite;transform-origin-x: 10%;}
			.balloon{-webkit-animation: balloon 2s infinite;}
			@-webkit-keyframes clik{
				0%{-webkit-transform: translateY(0)}
				50%{-webkit-transform: translateY(-10px)}
				100%{-webkit-transform: translateY(0)}
			}
			@keyframes clik{
				0%{transform: translateY(0)}
				50%{transform: translateY(-10px)}
				100%{transform: translateY(0)}
			}
			@-webkit-keyframes sun{
				from{-webkit-transform: rotate(0)}
				to{-webkit-transform: rotate(360deg)}
			}
			@keyframes sun{
				from{transform: rotate(0)}
				to{transform: rotate(360deg)}
			}
			@-webkit-keyframes train{
				from{-webkit-transform: translateX(-80%);}
				to{-webkit-transform: translateX(0);}
			}
			@keyframes train{
				from{transform: translateX(-80%);}
				to{transform: translateX(0);}
			}
			@-webkit-keyframes flag{
				0%{-webkit-transform:rotate(1.5deg) translateY(.5vw);}
				50%{-webkit-transform:rotate(-2deg) translateY(-1vw);}
				100%{-webkit-transform:rotate(1.5deg) translateY(.5vw);}
			}
			@keyframes flag{
				0%{transform:rotate(1.5deg) translateY(.5vw);}
				50%{transform:rotate(-2deg) translateY(-1vw);}
				100%{transform:rotate(1.5deg) translateY(.5vw);}
			}
			@-webkit-keyframes balloon{
				0%{-webkit-transform: translateY(3vw)}
				50%{-webkit-transform: translateY(-3vw)}
				100%{-webkit-transform: translateY(3vw)}
			}
			@keyframes balloon{
				0%{transform: translateY(3vw)}
				50%{transform: translateY(-3vw)}
				100%{transform: translateY(3vw)}
			}
			
			.rotate{animation:rot 2s linear infinite;-webkit-animation:rot 2s linear infinite;}

			@keyframes rot{
	
				0%{transform:rotate(0deg);}
	
				50%{transform:rotate(180deg);}
	
				100%{transform:rotate(360deg);}
	
			}
	
			@-webkit-keyframes rot{
	
				0%{transform:rotate(0deg);}
	
				50%{transform:rotate(180deg);}
	
				100%{transform:rotate(360deg);}
	
			}

			#showWin{display:none;position:fixed;width:90%;height:100%;z-index: 200;padding-left:5%;padding-right:5%;padding-top:20%;background-color:rgba(0,0,0,.6)}
		</style>
	</head>
		
	<body>
		<img src="images/share.png" style="opacity: 0;position:absolute;z-index: -10;"/>
		<audio id="audio" src="./music/Multex.mp3" autoplay preload loop></audio>
		<img class="rotate" src="./images/button.png" id="cls" style="display:block;width:10%;position:absolute;z-index: 60;font-weight:700;right:10px;top:10px"/>
		<div id="showWin" style="display: none;"><img src="images/2dcode.jpg"></div>
		<img class="bg" src="images/index.jpg"/>
		<img class="abs sun" src="images/index1.png"/>
		<img class="abs train" src="images/index2.png"/>
		<img class="abs tree" src="images/index3.png"/>
		<img class="abs flag" src="images/index5.png"/>
		<img class="abs balloon" src="images/index4.png"/>
		<a href="./xldt.html">
			<img class="abs clik1" src="images/index6.png"/>
		</a>
		<a href="./dtpj.html">
			<img class="abs clik2" src="images/index7.png"/>
		</a>
		<a href="./ccgl.html">
			<img class="abs clik3" src="images/index8.png"/>
		</a>
		<a href="./ccyh.html">
			<img class="abs clik4" src="images/index9.png"/>
		</a>
		<a href="./chwl.html">
			<img class="abs clik5" src="images/index10.png"/>
		</a>
		<a href="./dtbw.html">
			<img class="abs clik6" src="images/index11.png"/>
		</a>
		<a href="./dtgh.html">
			<img class="abs clik7" src="images/index12.png"/>
		</a>

			<img class="abs clik8" src="images/index13.png"/>

		
		<script type="text/javascript">
			;(function(){
				var ratio = window.innerWidth /  750;
				var abs = document.getElementsByClassName("abs");
				var elems = [
					{left:129,top:32,width:120,height:120},
					{left:0,top:670,width:590,height:140},
					{left:50,top:775,width:60,height:70},
					{left:90,top:380,width:590,height:160},
					{left:615,top:275,width:140,height:180},
					{left:195,top:918,width:320,height:100},
					{left:110,top:1115,width:320,height:100},
					{left:145,top:1400,width:320,height:100},
					{left:160,top:1680,width:320,height:100},
					{left:260,top:1920,width:320,height:100},
					{left:215,top:2145,width:320,height:100},
					{left:225,top:2440,width:320,height:100},
					{left:220,top:2700,width:320,height:100}
				];
				for(var i=0,j=elems.length;i<j;i++){
					for(var key in elems[i]){
						abs[i].style[key] = elems[i][key] * ratio + 'px';
					}
				}
				
				var showWin = document.getElementById("showWin");
				var qrcode = showWin.getElementsByTagName("img")[0]; 
				var showClic = document.getElementsByClassName("clik8")[0];
				showClic.onclick = function(){showWin.style.display = "block"};
				showWin.onclick = function(){showWin.style.display = "none"};
				qrcode.onclick = function(e){e.stopPropagation();return false;};
			})();
		</script>

		<script>

			var audio = document.getElementById('audio');

			audio.canplay = function(){audioAutoPlay('audio');};

			audioAutoPlay('audio');

			

			function audioAutoPlay(id){

			    var audio = document.getElementById(id);

			    audio.play();

			    document.addEventListener("WeixinJSBridgeReady", function () {

			            audio.play();

			    }, false);

			}

		</script>

		<script>
		;(function(){
			var au = document.getElementById('audio');
			var cls = document.getElementById('cls');
			var flg = true;
			cls.onclick = function(){
				if(flg){
					au.pause();
					cls.className = "";
					flg = false;
				}else{
					au.play();
					cls.className = "rotate";
					flg=true;
				}
			};
		})();
	</script>

	</body>

</html>